<link rel="stylesheet/less" type="text/css" href="./bricks/component/nav/nav.less"/>

<div class="ub-container">

    <div class="ub-nav-header">
        主标题
    </div>

    <div class="ub-nav-header-sub">
        次标题
    </div>

    <div class="ub-breadcrumb">
        <a href="#">首页</a>
        <a href="#">首页</a>
        <a href="#">首页</a>
        <a class="active" href="#">很长的内容很长的内容很长的内容很长的内容很长的内容很长的内容</a>
    </div>

    <div class="block-breaker"></div>

    <div class="ub-panel">
        <div class="head">
            <div class="title">下拉</div>
        </div>
        <div class="body">
            <div class="ub-dropdown">
                <div class="ub-dropdown-title">标题啊啊啊</div>
                <div class="ub-dropdown-list">
                    <a href="javascript:;" class="ub-dropdown-list-item">菜单1</a>
                    <a href="javascript:;" class="ub-dropdown-list-item">菜单2</a>
                    <a href="javascript:;" class="ub-dropdown-list-item">菜单3</a>
                </div>
            </div>
        </div>
    </div>

    <div class="block-breaker"></div>

    <div class="ub-nav">
        <div class="tag-label">标签</div>
        <div class="tag-value">
            <span class="tag-item">
                首页
                <a class="close" href="javascript:;"><i class="iconfont icon-close"></i></a>
            </span>
            <span class="tag-item">
                首页
                <a class="close" href="javascript:;"><i class="iconfont icon-close"></i></a>
            </span>
            <span class="tag-item">
                首页
                <a class="close" href="javascript:;"><i class="iconfont icon-close"></i></a>
            </span>
        </div>
    </div>

    <div class="block-breaker"></div>

    <div class="ub-nav">
        <div class="nav-right">
            <a class="item active" href="#">排序</a>
            <a class="item" href="#">排序</a>
            <a class="item" href="#">排序</a>
            <div class="item ub-dropdown">
                <div class="ub-dropdown-title">标题啊啊啊</div>
                <div class="ub-dropdown-list">
                    <a href="javascript:;" class="ub-dropdown-list-item">菜单1</a>
                    <a href="javascript:;" class="ub-dropdown-list-item">菜单2</a>
                    <a href="javascript:;" class="ub-dropdown-list-item">菜单3</a>
                </div>
            </div>
        </div>
        <a class="item" href="#">全部</a>
        <a class="item active" href="#">分类A</a>
        <a class="item" href="#" data-repeat="4">{ZH,2,4}</a>
    </div>

    <div class="block-breaker"></div>

    <div class="ub-nav-group">
        <div class="group" data-repeat="3">
            <div class="label">
                <div class="text">
                    <i class="iconfont icon-home"></i>
                    ub-nav-group
                </div>
            </div>
            <div class="items">
                <a href="#">全部</a>
                <a href="#" class="active">分类A</a>
                <a href="#" data-repeat="10">分类B</a>
            </div>
        </div>
    </div>

    <div class="block-breaker"></div>

    <div class="ub-nav-group bare">
        <div class="group" data-repeat="3">
            <div class="items">
                <a href="#" class="active">
                    <i class="iconfont icon-category"></i>
                    全部分类
                </a>
                <a href="#" class="active">分类A</a>
                <a href="#" data-repeat="8">分类B</a>
            </div>
        </div>
    </div>

    <div class="block-breaker"></div>

    <div class="ub-nav-tab">
        <a href="#">全部</a>
        <a href="#" class="active">分类A</a>
        <a href="#" data-repeat="4">{ZH,3,4}</a>
    </div>

    <div class="block-breaker"></div>

    <div class="ub-nav-grid g3">
        <a href="javascript:;" class="item">
            <div class="icon"><i class="img iconfont icon-home"></i></div>
            <div class="title">测试1</div>
        </a>
        <a href="javascript:;" class="item">
            <div class="icon"><i class="img iconfont icon-home"></i></div>
            <div class="title">测试2</div>
        </a>
        <a href="javascript:;" class="item">
            <div class="icon"><i class="img iconfont icon-home"></i></div>
            <div class="title">测试3</div>
        </a>
        <a href="javascript:;" class="item">
            <div class="icon"><i class="img iconfont icon-home"></i></div>
            <div class="title">测试4</div>
        </a>
    </div>

    <div class="block-breaker"></div>

    <div class="ub-nav-mobile-foot-nav-spacer"></div>
    <div class="ub-nav-mobile-foot-nav">
        <a href="#" class="item">
            <span class="icon"><i class="img iconfont icon-left"></i></span>
            <span class="name">上一个</span>
        </a>
        <a href="#" class="item disabled">
            <span class="name">下一个</span>
            <span class="icon"><i class="img iconfont icon-right"></i></span>
        </a>
    </div>

    <div class="block-breaker"></div>

    <div class="ub-panel">
        <div class="body">
            <div class="ub-nav-category">
                <a class="group-title" href="javascript:;">ub-nav-category 职业方向</a>
                <div class="group-list">
                    <a class="item" href="javascript:;">Java工程师</a>
                    <a class="item" href="javascript:;">C++工程师</a>
                    <a class="item" href="javascript:;">安卓工程师</a>
                    <a class="item" href="javascript:;">iOS工程师</a>
                    <a class="item" href="javascript:;">运维工程师</a>
                    <a class="item" href="javascript:;">前端工程师</a>
                    <a class="item" href="javascript:;">算法工程师</a>
                    <a class="item" href="javascript:;">PHP工程师</a>
                    <a class="item" href="javascript:;">通信技术基础知识</a>
                </div>
                <a class="group-title" href="javascript:;">编程语言</a>
                <div class="group-list">
                    <a class="item" href="javascript:;">C/C++</a>
                    <a class="item" href="javascript:;">Java</a>
                    <a class="item" href="javascript:;">Javascript</a>
                    <a class="item" href="javascript:;">C#</a>
                    <a class="item" href="javascript:;">Python</a>
                    <a class="item" href="javascript:;">HTML/CSS</a>
                    <a class="item" href="javascript:;">PHP</a>
                    <a class="item" href="javascript:;">小众语言</a>
                </div>
                <a class="group-title" href="javascript:;">软件开发</a>
                <div class="group-list">
                    <a class="item" href="javascript:;">软件工程</a>
                    <a class="item" href="javascript:;">软件测试</a>
                    <a class="item" href="javascript:;">面向对象</a>
                    <a class="item" href="javascript:;">海量数据</a>
                    <a class="item" href="javascript:;">iOS</a>
                    <a class="item" href="javascript:;">Android</a>
                    <a class="item" href="javascript:;">Linux</a>
                    <a class="item" href="javascript:;">.NET</a>
                    <a class="item" href="javascript:;">Windows</a>
                    <a class="item" href="javascript:;">分布式</a>
                    <a class="item" href="javascript:;">系统设计</a>
                    <a class="item" href="javascript:;">开发工具</a>
                    <a class="item" href="javascript:;">Jquery</a>
                    <a class="item" href="javascript:;">Struts</a>
                    <a class="item" href="javascript:;">Hibernate</a>
                    <a class="item" href="javascript:;">Redis</a>
                    <a class="item" href="javascript:;">WebServer</a>
                    <a class="item" href="javascript:;">Hadoop/Spark</a>
                    <a class="item" href="javascript:;">数据统计</a>
                    <a class="item" href="javascript:;">机器学习</a>
                    <a class="item" href="javascript:;">推荐</a>
                </div>
            </div>
        </div>
    </div>

    <div class="block-breaker"></div>

    <div class="ub-nav-mobile-foot-spacer"></div>
    <div class="ub-nav-mobile-foot">
        <a class="item" href="#">
            <div class="icon"><i class="img iconfont icon-home"></i></div>
            <div class="title">分类A</div>
        </a>
        <a class="item" href="#">
            <div class="icon"><i class="img iconfont icon-home"></i></div>
            <div class="title">分类B</div>
        </a>
        <a class="item" href="#">
            <div class="icon"><i class="img iconfont icon-home"></i></div>
            <div class="title">分类C</div>
            <div class="badge tw-hidden" data-shop-cart-count>5</div>
        </a>
        <a class="item" href="#">
            <div class="name">分类C</div>
        </a>
    </div>


</div>
